<template>
  <div class="homeDetail">
    <div class="tabr-nav-title">
      <van-nav-bar title="提交办结" style="width: 100%; height: 44px" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="formList">
      <van-form label-width="100%" label-align="top">
        <van-cell-group>
          <van-field v-model="state.fromData.disposalSituation" name="disposalSituation" label="处置描述" placeholder="请输入" type="textarea" />

          <div class="uploadButton">
            <van-uploader v-model="fileList" :before-read="beforeRead" :after-read="afterRead">
              <van-button type="primary" size="small">上传拍摄处置后照片</van-button>
            </van-uploader>
          </div>
        </van-cell-group>
      </van-form>
    </div>
    <div class="detailFoot">
      <van-button style="flex: 1" type="primary" size="small" @click="submitClick">确认办结</van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { showFailToast, showSuccessToast, showToast } from "vant";
import { completion, feedback, upload } from "@/api/index.js";
const router = useRouter();
const route = useRoute();
const fileList = ref([]);
const status = route.query.status || "";
const state = reactive({
  fromData: {},
  list: [],
});
// 返回布尔值
const beforeRead = (file) => {
  if (file.type !== "image/jpeg" && file.type !== "image/png") {
    showToast("请上传 jpg/png 格式图片");
    return false;
  }
  if (fileList.value.length >= 1) {
    fileList.value.shift();
  }
  return true;
};

// 上传
const afterRead = (file) => {
  const formData = new FormData();
  formData.append("file", file.file);
  file.status = "uploading";
  file.message = "上传中...";
  upload(formData).then((res) => {
    if (res.data.code === 200 && res.data.data) {
      state.fromData.fileId = res.data.data.id;
      file.status = "done";
    }
  });
};
const submitClick = async () => {
  let params = {
    ...state.fromData
  };

  if (!state.fromData.fileId) {
    showToast("请上传照片");
    return;
  }
  await completion(params)
    .then((res) => {
      showSuccessToast("提交成功");
      history.back();
    })
    .catch((err) => { });
};
const onClickLeft = () => history.back();
onMounted(() => {
  let detailData = JSON.parse(route.query.detailData);
  state.fromData = {
    ...detailData
  };
});
</script>

<style scoped lang="less">
.homeDetail {
  height: 100vh;
  background: #f7f8f7;
}

.homeHeader {
  padding: 10px;
  background: #fff;
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
}

.tabr-nav-title {
  display: flex;
  align-items: center;
  font-weight: 600;
  height: 44px;
  font-size: 18px;
  color: #29292c;
  text-align: center;
  font-style: normal;
  background: #fff;
  width: 100vw;
}

.formList {
  height: calc(100vh - 135px);
  margin: 10px 0;
  overflow-y: auto;
  background: #fff;

  .uploadButton {
    padding: 10px;
    box-sizing: border-box;

    :deep(.van-uploader) {
      width: 100%;

      .van-uploader__input-wrapper {
        width: 100%;

        .van-button {
          width: 100%;
        }
      }
    }
  }

  .newList {
    background: #fff;
    border-radius: 10px;
    padding-bottom: 1px;
    margin-bottom: 10px;
    padding: 10px;

    .list {
      width: 100%;
      background-color: rgba(242, 242, 242, 1);
      margin-bottom: 5px;
      padding: 8px 10px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      &:last-child {
        margin-bottom: 0;
      }

      .top {
        color: #333;
        width: calc(100% - 50px);
      }

      .bottom {
        margin-top: 5px;
        --van-switch-width: calc(100vw - 72px);
        position: relative;

        .tips {
          position: absolute;
          bottom: 10px;
          left: 40px;

          .tip {
            margin-left: 50px;
            font-size: 10px;
          }
        }
      }
    }
  }
}

.detailFoot {
  width: 100vw;
  padding: 20px;
  background: #fff;
  position: fixed;
  bottom: 0px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}
</style>
